<template>
  <div class="pro_div">
    <div class="img_top">
      <img :src="back_img.img" alt="" />
      <span> {{ back_img.intro }} </span>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: 100px">
      <span style="color: #534036; font-size: 40px; margin-top: 40px"
        >企业视频</span
      >
      <img
        src="../assets/bl.svg"
        style="width: 64px; height: auto; margin-top: 28px"
      />
    </div>
    <div class="flex-c-c-c">
      <div style="height: 500px;width: 100%;" class="flex-c-c-c imgs_back"
        :style="{ backgroundImage: 'url(' + back_img.img + ')' }">
        <!-- <span style="font-size: 30px;color: #FFF;">联系我们</span> -->
        <div
          style="border-top:1px solid #FFF;font-size: 60px;color: #FFF;height: 100px;line-height: 100px;margin-top: 15px;font-weight: 250;">
          {{ back_img.intro }}</div>
      </div>
     
    </div>
  </div>
</template>

<script>
import {
  Message
} from 'element-ui';
export default {
  data() {
    return {
      back_img: {},
      obj: {}
    }
  },
  mounted() {
    let headers = {
      token: this.$md5(this.$key + this.$dataTime()),
      rtimes: this.$dataTime(),
    }
    this.$axios.post(this.$base + '/Index/aboutUs', headers).then((res) => {
      if (res.data.code == 2000) {
        this.obj = res.data.data
      } else {
        Message.error(res.data.msg);
      }
      console.log(res)
    })
      .catch(function (error) {
        Message.error(error.message);
      });
    headers.btype = 'abus'
    this.$axios.post(this.$base + '/Index/getBg', headers).then((res) => {
      if (res.data.code == 2000) {
        this.back_img = res.data.data
      } else {
        Message.error(res.data.msg);
      }
      console.log(res)
    })
      .catch(function (error) {
        Message.error(error.message);
      });
    headers.title = 'abus'
    this.$axios.post(this.$base + '/Index/getWebInfo', headers).then((res) => {
      if (res.data.code == 2000) {
        var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = res.data.data.ico;
        document.title = res.data.data.web_title
        document.getElementsByTagName('head')[0].appendChild(link);
      } else {
        Message.error(res.data.msg);
      }
      console.log(res)
    })
      .catch(function (error) {
        Message.error(error.message);
      });
  }
}
</script>

<style  lang="less" scoped>
.img_top {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;

  img {
    width: 100%;
    height: auto;
  }

  span {
    position: absolute;
    left: 346px;
    top: 180px;
    line-height: 80px;
    font-size: 40px;
    color: #dcdcdc;
    letter-spacing: 10px;
    font-weight: 600;
  }
}
.imgs_back {
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 1920px 500px;
  background-origin: border-box;
}

.flex_divs {
  width: 65%;
  height: auto;
  padding: 50px;
  margin: 70px 0;
  box-shadow: 0px 3px 9px #00000026;
  background-color: #FFF;
}
</style>
